<template>
  <div class="customer-register-user">
    <gl-breadcrumb class="mb15" text="客户管理,客户详情,注册用户"></gl-breadcrumb>
    <div class="table p20">
      <div class="title">
        <div class="name">{{$route.query.name}}</div>
        <div class="search flex jcb mt10">
          <div class="total">用户总数：{{all}}</div>
          <el-input class="w20" placeholder="请输入id、手机号" v-model="keyword">
            <el-button slot="append" icon="el-icon-search" @click="getList(1)"></el-button>
          </el-input>
        </div>
      </div>
      <gl-table v-loading="loading" class="p20" :data="list" :columns="listLabel"></gl-table>
      <gl-pagination :curr="curr" :size="limits" :total="total" @callback="getList"></gl-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "CustomerRegisterUser",
    data() {
      return {
        loading: true,

        all: 0,
        total: 0,
        limits: 10,
        curr: 1,
        keyword: '',

        list: [],
        listLabel: [
          {label: '用户ID', prop: 'id'},
          {label: '用户手机号', prop: 'phone'},
          {label: '绑定产品', prop: 'product_num'},
          {label: '设备总数', prop: 'device_num'},
          {label: '所在区域', prop: 'area'},
          {label: '注册时间', prop: 'create_time'},
          {label: '注册IP地址', prop: 'ip'},
          {label: '最近活跃', prop: 'active_time', text: '--'},
        ],
      }
    },
    created() {
      this.getList(1);
    },
    methods: {
      getList(init) {
        if (init) {
          if (init.curr) {
            this.curr = init.curr;
            this.limits = init.size;
          } else {
            this.curr = 1;
          }
        }
        this.loading = true;
        this.http.$post('admin2/user.Api/lists', {
          curr: this.curr,
          limits: this.limits,
          customer_id: this.$route.query.id,
          keyword: this.keyword,
        }).then(res => {
          this.loading = false;
          this.list = res.list;
          this.total = res.total;
          this.all = Math.max(res.total, this.all);
        }).catch(e => {
          this.loading = false;
          this.$err(e);
        });
      }
    },
  }
</script>

<style scoped lang="less">
  .table {
    background-color: #fff;
    .search {
      align-items: center;
    }
    .name {
      font-size: 22px;
      font-weight: bold;
      color: #333;
    }
  }
</style>